<template>
  <div>
<!--    面包屑导航区-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <!-- 搜索与添加区域 -->
      <div style="margin-top: 15px;">
        <el-row>
          <el-row :gutter="20">
            <el-col :span="7">
              <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getUserList" >
                <el-button  @click="findUserByusername" slot="append" icon="el-icon-search"></el-button>
              </el-input>
            </el-col>

          </el-row>
        </el-row>
      </div>
<!--      用户列表区域-->
      <el-table :data="userList"  border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="用户名" prop="username"></el-table-column>
        <el-table-column label="年龄" prop="age"></el-table-column>
        <el-table-column label="邮箱" prop="email"></el-table-column>
        <el-table-column label="昵称" prop="name"></el-table-column>
        <!-- <el-table-column label="密码" prop="password"></el-table-column> -->
        <el-table-column label="操作">
<!--          作用域插槽 scope.id就可以用来删除-->
          <template slot-scope="scope">
            <!-- 删除按钮 -->
            <el-tooltip effect="dark" content="删除角色" placement="top-start" :enterable="false">
              <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUserById(scope.row.id)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="this.queryInfo.current"
                     :page-sizes="[1, 2, 5, 10]" :page-size="this.queryInfo.size"
                     layout="total, sizes, prev, pager, next, jumper" :total="this.queryInfo.total">
      </el-pagination>

    </el-card>

  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "User",
  data(){
    // 验证邮箱的规则
    const checkEmail = (rule, value, cb) => {
      // 验证邮箱的正则表达式
      const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/

      if (regEmail.test(value)) {
        // 合法的邮箱
        return cb()
      }

      cb(new Error('请输入合法的邮箱'))
    };
    return{
      //获取用户的对象,分页查询的依据
      queryInfo:{
        query:"",//搜索条件
        current:1,//几页
        size:2,//几行
        total:10//数据的总数量
      },
      //显示用户列表
      userList:[]
    }
  },
  //开始就发起异步请求来得到数据

  created: function () {
    this.getUserList();
  },
  methods:{
    //监听pageSize 改变的事件
    handleSizeChange(currentSize){
      //currentSize分页栏 选择的每页几行数据
      this.queryInfo.size=currentSize;
      this.getUserList();

    },
    //页码值开始变化，就触发事件
    handleCurrentChange(currentPage){
      //currentPage改变后选择的那一页
      this.queryInfo.current=currentPage;
      this.getUserList();

    },
    getUserList(){
		//这是就是删除输入框删除之后，就可以调用这个方法
		//重新向后台调用数据，得到一个返回的对象
		//向后台调用数据，得到一个返回的对象
		var this_=this;
		axios.post("user/findAll",this.queryInfo).then(ret => {
		  if (ret.flag) {
			//显示数据，就是绑定对象数组
			this_.userList = ret.data.rows;
			this_.queryInfo.total = ret.data.total;
		  } else {
			this_.$message.success("查询失败");
		  }
		})

    },
	findUserByusername(){
		this.queryInfo.current=1;
		this.getUserList();
	},
    addDialogClosed(){
		// 这就是添加用户对话框关闭时，调用这个方法
		this.$refs.addFormRef.resetFields()
    },
    removeUserById(id){
      //删除一个用户
	  this.$confirm("此操作将永久删除该用户, 是否继续?",'提示', {
	          confirmButtonText: "确定",
	          cancelButtonText: "取消",
	          type: "warning",
	        })
	        .then(() => {
	         var this_=this;
	         axios.post("user/removeUser/"+id).then(ret => {
	           if (ret.flag) {
	         	//显示数据，就是绑定对象数组
	         		this_.$message.success("删除对象成功");
	         		this_.getUserList();
	           } else {
	         			this_.$message.error("删除对象失败");
	           }
	         })
	        })
	        .catch(() => {
	         this.$message.success("已取消删除")
			}) ;
    }
  }
}
</script>

<style scoped lang="less">
.el-card{
  margin-top: 15px;
  font-size: 12px;
  .el-pagination{
    margin-top: 15px;
  }
}
.el-table{
  margin-top: 15px;
  font-size: 12px;
}

</style>
